<template>
    <div class="Top-box">
        <div class="Top-box-select">
            <el-dropdown @command="handleCommand" :teleported="false">
                <span class="el-dropdown-link" style="font-size: 18px; font-weight: bold;">
                    {{ Props.year }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="(item, index) in dropdownitem" :key="index" :command="item.command">{{
                            item.text }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="Top-box-tab">
            <el-icon size="12" @click="Arrowevent('recoil')" style="cursor: pointer;">
                <ArrowLeftBold />
            </el-icon>
            <span>{{ Props.month }}月</span>
            <el-icon size="12" @click="Arrowevent('advance')" style="cursor: pointer;">
                <ArrowRightBold />
            </el-icon>
        </div>
        <div class="Top-box-blck">
            <span @click="Arrowevent('initialize')" class="initialize">回到本月</span>
        </div>
        <div class="Top-box-empty"></div>
        <div class="Top-box-announcement">
            <AnnounCement :AnnounCementStyle="AnnounCementStyle">
                <template #AnnounCementCont>
                    <div class="AnnounCementCont">
                        <svg-icon name="喇叭" width="18" height="18"></svg-icon>
                        <div style="width: auto;" class="AnnounCementCont-item">
                            <el-carousel height="50px" direction="vertical" :autoplay="true" indicator-position='none'
                                style="width: 150px;">
                                <el-carousel-item v-for="item in AnnounCementText" :key="item"
                                    style="width: 150px; display: flex; align-items: center;">
                                    <p>{{ item }}</p>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                </template>
            </AnnounCement>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue';
import { reactive } from 'vue';
import AnnounCement from '@/components/Announcement/AnnounCement.vue';

// 声明一个响应式变量dropdownitem，用于存储一个数组
const dropdownitem = reactive([
    {
        command: '2017',
        text: '2017'
    },
    {
        command: '2018',
        text: '2018'
    },
    {
        command: '2019',
        text: '2019'
    },
    {
        command: '2020',
        text: '2020'
    },
    {
        command: '2021',
        text: '2021'
    },
    {
        command: '2022',
        text: '2022'
    },
    {
        command: '2023',
        text: '2023'
    },
    {
        command: '2024',
        text: '2024'
    },
    {
        command: '2025',
        text: '2025'
    },
    {
        command: '2026',
        text: '2026'
    },
    {
        command: '2027',
        text: '2027'
    },
    {
        command: '2028',
        text: '2028'
    },
    {
        command: '2029',
        text: '2029'
    },
]);
// 声明一个响应式变量AnnounCementStyle，用于存储一个对象
const AnnounCementStyle = reactive({
    width: '200px',
    height: '30px',
    background: 'linear-gradient(to right,#FFA337,#FF7A6E,#FF5C96)',
    borderRadius: '20px'
});
// 声明一个响应式变量AnnounCementText，用于存储一个数组
const AnnounCementText = reactive([
    '【2024】全年公告日历',
    '【李树凯】非常秀开发者',
    '【陈顺斗】非常秀开发者',
    '【郭子恒】非常秀开发者',
    '【钱星鹏】非常秀开发者',
    '【高胜旺】非常秀开发者',
]);

// 声明一个Props变量，用于存储一个对象，该对象包含两个属性：month和year
const Props = defineProps(['month', 'year']);

// 声明一个Emit变量，用于存储一个函数，该函数接收三个参数：ChiArrowevent，select和command
const Emit = defineEmits(['ChiArrowevent']);

// 声明一个handleCommand函数，用于处理点击的命令
const handleCommand = (command: string | number | object) => {
    // 调用父组件方法，回调传参
    Emit('ChiArrowevent', 'select', command);
};

// 声明一个Arrowevent函数，用于处理点击的命令
const Arrowevent = (type: string) => {
    // 调用父组件方法，回调传参
    Emit('ChiArrowevent', type);
};
</script>

<style scoped lang="scss">
.Top-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    user-select: none;

    >div {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .Top-box-select {
        width: 13%;
        height: 100%;

        .el-tooltip__trigger:focus-visible {
            outline: unset !important;
        }

        .el-dropdown-link {
            cursor: pointer;
            color: var(--el-color-primary);
            display: flex;
            align-items: center;

        }
    }

    .Top-box-tab {
        width: 13%;
        height: 100%;
        font-weight: bold;
        font-size: 18px;

        span {
            width: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .Top-box-blck {
        width: 13%;
        height: 100%;

        .initialize {
            width: 60px;
            height: 25px;
            background: #F5F7FB;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
        }

        .initialize:hover {
            color: blue;
            cursor: pointer;
        }
    }

    .Top-box-empty {
        width: 30%;
        height: 100%;
    }

    .Top-box-announcement {
        width: 31%;
        height: 100%;

        .AnnounCementCont {
            font-size: 12px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>